{"componentChunkName":"component---src-templates-studio-page-js","path":"/studio/qixi","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"👓 七夕有你","noFooter":false,"description":"七夕节日，最近沉迷 3D 搭建，所以花了几天空闲时间赶出来了这个小3D交互，有情人终成眷属，七夕快乐！","date":"2021-04-03","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='458'%3e%3cpath%20d='M366%20143l-2%2012v5h4l12%202c7%200%2010%201%209%203l-41-4-40-4-2%2012-2%2015v4h8c10%201%2012%202%2010%204-1%201-10%200-44-4l-43-5-1%2020-1%2020%204%201c4%200%205%202%202%203-1%201-16-1-48-5l-47-7%204%2065%2010%202%2010%202v3c0%204%200%204%203%204%202%200%203-1%203-3%200-4-2-4%2022%201l20%203v3c0%203%200%204%202%204%202%201%204-1%204-5l1-1c4%202%2013%202%2014%201l2-25%201-24h10v4c0%204%200%204%203%204%202%200%202%200%202-3%200-4-1-4%2022%200l18%202v4c0%205%203%206%204%200%201-3%201-3%205-2%208%201%208%202%202%204-6%203-6%204-7%209%200%205%200%205%203%206l6%201h5c3%202%205%200%2010-8l4-8-3-4c-2-2-4-4-6-4-2-1-2-1-2-4a503%20503%200%20006-29c0-2%201-2%202-2a602%20602%200%200035%206v4c0%203%200%203%202%203l2-3c0-4%201-4%209-3h6l3-15c3-17%203-17%206-17l7%201%206%201v-27c0-25%200-27-2-27a478%20478%200%2001-30-3l-2%208M29%20258a2172%202172%200%200112%2068l12%203c11%202%2011%203%2012%206%202%205%208%205%208%200%200-2%202-1%2021%203%2024%205%2023%204%2023%208s6%205%207%201c0-3%202-3%202%200%200%202-1%204-8%207-10%205-10%205-9%2011%200%205%201%205%204%208l4%202%205-3c6-3%206-3%209-1%204%202%208%200%2014-11l5-9-6-4-5-3v-5a753%20753%200%2000-6-67h-12a11590%2011590%200%2001-92-14m332%2034c-4%202-4%203-2%205%204%204%2011%203%2016-1l2-2-2-2c-3-3-10-3-14%200m-167%2030l-7%202c-4%200-8%209-5%2013%201%202%202%209%200%2011-1%202%200%203%201%205v6c-1%202-1%202%201%204a485%20485%200%20019%208l4%203c4%202%207%202%2011-1%202-2%203-2%204-1%203%203%209-2%209-6%200-3-2-3-4-1-3%204-4%203-2-1%203-5%203-5-1-7s-6-7-2-9l3-7%202-7%201-4c0-3-1-4-7-7-9-5-11-5-17-1m74%206c3%201%204%204%204%208%200%205-4%208-9%208-4%200-4%200-5%208-1%203%200%204%201%205%202%202%202%203%202%209s0%207%202%207%207%204%206%205l-4-1c-4-2-4-2-5-1-3%205%201%208%209%207%206%200%209-3%209-7-1-2%200-3%201-4s2-2%202-5l1-7%202-7c1-3%201-4%205-4l8-4%204-4-3-2-7-2c-4%200-4%200-4-2%200-3%200-3-7-3s-8-1-8-3-1-2-3-2c-3%200-3%200-1%201m-31%2023c-5%205-8%205-5%201l2-3h-2c-4%200-9%205-7%208%202%205%202%208%201%2010-3%202-1%204%205%204l4%203%203%203%202-3c1-2%202-4%201-5l1-11%201-4c2%200%201-3-1-4-2-2-2-2-5%201m79%203c-3%203%200%207%206%207v1c-3%202-10%201-10-2l-1-2c-3%200-2%204%201%205%207%204%2021-1%2020-7-2-4-12-6-16-2M0%20382c0%2025%200%2029%202%2029%203%202%205%201%207-2l3-2-6-25-5-26c-1-2-1%2010-1%2026m377-27l-1%203c0%202-7%208-22%2018l-6%203c-3-1-5%200-5%203l-3%204-3%202v-2c0-4-5-3-8%201-2%203-3%204-7%204-6%201-8%202-10%209-2%205-6%207-6%203%200-2-3-1-4%201-1%201-1%203%201%206l2%2011c-1%207%202%2011%205%208%202-2%2010%202%209%205s4%206%206%204c1-2%203-1%2010%203l7%205c-1%202%203%204%206%204%204%200%2011%204%2011%206s1%202%208%202h9l-3-2-5-2c-2-1-3-4-2-4l8%204c6%204%208%204%2013%204h5l-12-7c-11-6-12-7-12-9%200-3-3-5-5-3-1%202-2%202-3%201-2-2-1-7%201-9l2-6%201-8c1-5-9-13-16-15-5-1-5-1-4-3l2-3%2013-12c13-10%2013-10%2018-9l6-1c0-2%202-1%208%202%209%205%209%205%209%201%200-2-1-3-7-5l-8-3-1-2c0-3%200-3%209%201l7%204v-3c0-2-1-3-7-6-7-3-8-3-7-6%200-2%200-2-2-2l-4-1-3%201m-205%2033c-3%201-1%202%202%202%204-1%208%200%208%202%200%203-6%204-12%204-7-1-14%200-14%201s11%208%2013%208%201-2-3-4l-4-3h10c11-1%2015-3%2013-7-2-3-9-5-13-3m13%2011c-5%202-11%207-11%209s5%205%209%205c5%200%2014-4%2016-8l2-3-2-2c-3-4-9-4-14-1m2%202c-9%204-11%208-6%2010%203%201%2016-6%2016-9s-5-4-10-1m32%2017l-2%203-3%201c-4%200-8%204-8%206%201%204%207%207%2012%207%205-1%208-4%207-7l3-1c3%200%206-2%206-4%200-5-11-8-15-5'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":0.8738019169329073,"src":"/static/495f6df199765fb0fc32847cd24f2475/fbb15/qixi.png","srcSet":"/static/495f6df199765fb0fc32847cd24f2475/82675/qixi.png 500w,\n/static/495f6df199765fb0fc32847cd24f2475/fef60/qixi.png 1000w,\n/static/495f6df199765fb0fc32847cd24f2475/fbb15/qixi.png 1094w","srcWebp":"/static/495f6df199765fb0fc32847cd24f2475/f71dc/qixi.webp","srcSetWebp":"/static/495f6df199765fb0fc32847cd24f2475/7fe04/qixi.webp 500w,\n/static/495f6df199765fb0fc32847cd24f2475/d619e/qixi.webp 1000w,\n/static/495f6df199765fb0fc32847cd24f2475/f71dc/qixi.webp 1094w","sizes":"(max-width: 1094px) 100vw, 1094px"}}},"noGlobalStyles":false,"bannerCredit":null,"slug":"/studio/qixi","tags":["talking"]},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"qixi\",\n  \"title\": \"👓 七夕有你\",\n  \"tech\": \"other\",\n  \"date\": \"2021-04-03 16:34:10\",\n  \"description\": \"七夕节日，最近沉迷 3D 搭建，所以花了几天空闲时间赶出来了这个小3D交互，有情人终成眷属，七夕快乐！\",\n  \"titleColor\": \"#85216c\",\n  \"btnStyle\": \"lightYellow\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/qixi.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/qixi\"\n  }, \"\\u4E03\\u5915\\u6709\\u4F60\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b42645e6-9ab0-5799-aa9a-4aa30b7eeb79","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/cyberpunk.md","id":"753ce666-76ed-5d43-9816-416999931e37","parent":{"name":"cyberpunk","sourceInstanceName":"studio"},"excerpt":"预览可以到  Cyberpunk UI","fields":{"title":"👓 Cyberpunk UI","slug":"/studio/cyberpunk","description":"赛博朋克的 UI 样式，前端实现的一些界面元素","date":"2021-06-03","redirects":null,"datetime":"2021-06-03 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"cyberpunk","date":"2021-06-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"cyberpunk\",\n  \"title\": \"👓 Cyberpunk UI\",\n  \"tech\": \"other\",\n  \"date\": \"2021-06-03 16:34:10\",\n  \"description\": \"赛博朋克的 UI 样式，前端实现的一些界面元素\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"lightYellow\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/cyberpunk.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/cyberpunk\"\n  }, \"Cyberpunk UI\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/short-url/short-url.md","id":"36992e38-be01-58aa-b6c3-d76c51346f17","parent":{"name":"short-url","sourceInstanceName":"studio"},"excerpt":"相关文章： 🔗 30 分钟创建一个短链服务 这是地址： 短链服务 “域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。 后期看心情可能增加统计功能、自动二维码、加密、自定义等功能，也可能落在这吃灰。","fields":{"title":"🔗 短链服务","slug":"/studio/short-url","description":"对于技术人来说，很多优秀的技术需要踮起脚尖才能看到。技术无界限，但是还是需要遵守肉身所在地的法律法规哦~~","date":"2020-09-20","redirects":null,"datetime":"2020-09-20 20:28:12","categories":[],"series":null,"tags":["short-url","短链"],"status":"online"},"frontmatter":{"published":null,"tags":["short-url","短链"],"theme":null,"slug":"short-url","date":"2020-09-20 20:28:12"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"short-url\",\n  \"title\": \"🔗 短链服务\",\n  \"tech\": \"other\",\n  \"date\": \"2020-09-20 20:28:12\",\n  \"description\": \"对于技术人来说，很多优秀的技术需要踮起脚尖才能看到。技术无界限，但是还是需要遵守肉身所在地的法律法规哦~~\",\n  \"titleColor\": \"#3f3f3f\",\n  \"btnStyle\": \"darkBlue\",\n  \"contentPadding\": \"3% 10% 0\",\n  \"tags\": [\"short-url\", \"短链\"],\n  \"banner\": \"../studios/short.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u76F8\\u5173\\u6587\\u7AE0\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/short-url-service-in-30-minutes\"\n  }, \"\\uD83D\\uDD17 30 \\u5206\\u949F\\u521B\\u5EFA\\u4E00\\u4E2A\\u77ED\\u94FE\\u670D\\u52A1\")), mdx(\"p\", null, \"\\u8FD9\\u662F\\u5730\\u5740\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://s.ubug.io/\"\n  }, \"\\u77ED\\u94FE\\u670D\\u52A1\")), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/abac10aa1271ddc100a766e57da44f0c/47e4d/banner.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"29.72972972972973%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAjElEQVQY052QSw6DMAxEuf8N2bClqC0t4DhfMo2NgtoNUmNplLElP03c4atyzudrnVc5H0DGYllJvczYOqSUfnZqdVdAw1Zhj/mN6T4ffVEbsCxtxHi+FpUkJMMK8yVp/Ae47xkhRO3F16pe0sWWLx83dLhNhGFYS2/PGzYBZTFEj3Fk9P2mXmZXN/wA3xrYup9WGI0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"短链服务\",\n    \"title\": \"短链服务\",\n    \"src\": \"/static/abac10aa1271ddc100a766e57da44f0c/0dc48/banner.png\",\n    \"srcSet\": [\"/static/abac10aa1271ddc100a766e57da44f0c/2c191/banner.png 259w\", \"/static/abac10aa1271ddc100a766e57da44f0c/86b01/banner.png 518w\", \"/static/abac10aa1271ddc100a766e57da44f0c/0dc48/banner.png 1035w\", \"/static/abac10aa1271ddc100a766e57da44f0c/47e4d/banner.png 1403w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u77ED\\u94FE\\u670D\\u52A1\"), \"\\n  \")), mdx(\"p\", null, \"\\u201C\\u57DF\\u540D\\u5F88\\u7B80\\u7EC3\\uFF0C\\u5982\\u679C\\u7528\\u6765\\u505A\\u77ED\\u94FE\\u670D\\u52A1\\u7684\\u8BDD\\u5E94\\u8BE5\\u633A\\u6709\\u610F\\u601D\\u201D \\u8FD9\\u4E2A\\u60F3\\u6CD5\\u4E00\\u76F4\\u5B58\\u5728\\uFF0C\\u51B3\\u5B9A\\u8981\\u505A\\u4E4B\\u540E\\u53D1\\u73B0\\u8FD8\\u662F\\u633A\\u5BB9\\u6613\\u5B9E\\u73B0\\u7684\\uFF0C\\u8FC7\\u7A0B\\u5F88\\u6709\\u610F\\u601D\\u3002\"), mdx(\"p\", null, \"\\u540E\\u671F\\u770B\\u5FC3\\u60C5\\u53EF\\u80FD\\u589E\\u52A0\\u7EDF\\u8BA1\\u529F\\u80FD\\u3001\\u81EA\\u52A8\\u4E8C\\u7EF4\\u7801\\u3001\\u52A0\\u5BC6\\u3001\\u81EA\\u5B9A\\u4E49\\u7B49\\u529F\\u80FD\\uFF0C\\u4E5F\\u53EF\\u80FD\\u843D\\u5728\\u8FD9\\u5403\\u7070\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}